<template>
  <Card>
    <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
      <Form-item label="账号" prop="Name">
        <Input v-model="formValidate.Name" disabled></Input>
      </Form-item>
      <Form-item label="姓名" prop="Abbr">
        <Input v-model="formValidate.Abbr" placeholder="请输入" @on-enter="asyncOK()"></Input>
      </Form-item>
      <Form-item label="性别" prop="Sex">
        <Radio-group v-model.number="formValidate.Sex">
          <Radio :label="1">男</Radio>
          <Radio :label="0">女</Radio>
        </Radio-group>
      </Form-item>
      <!-- <Form-item label="职业" prop="Expert">
        <Input v-model="formValidate.Expert" placeholder="请输入" @on-enter="asyncOK()"></Input>
      </Form-item>
      <Form-item label="职务" prop="Job">
        <Input v-model="formValidate.Job" placeholder="请输入" @on-enter="asyncOK()"></Input>
      </Form-item> -->
      <Form-item label="电话" prop="Phone">
        <Input v-model="formValidate.Phone" placeholder="请输入" @on-enter="asyncOK()"></Input>
      </Form-item>
      <Form-item label="Email" prop="Email">
        <Input v-model="formValidate.Email" placeholder="请输入" @on-enter="asyncOK()"></Input>
      </Form-item>
      <!-- <Form-item label="照片上传">
        <Row>
          <i-col span="12">
            <Upload ref="upload"
            :on-success="handleSuccess"
            :format="['jpg','jpeg','png']"
            :max-size="2048" :on-format-error="handleFormatError"
            :on-exceeded-size="handleMaxSize"
            :on-remove="handleRemove"
            :before-upload="handleBeforeUpload"
            type="drag"
            :action="actionUrl">
              <div style="padding: 20px 0">
                <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                <p>点击或将文件拖拽到这里上传（仅限于mp4、flv格式文件）</p>
              </div>
            </Upload>
          </i-col>
          <i-col span="12" v-if="formValidate.Photo">
            <div class="demo-upload-list">
              <img :src="imgUrl" class="upload-img">
            </div>
          </i-col>
        </Row>
      </Form-item> -->
      <Form-item label="介绍" prop="remark">
        <Input v-model="formValidate.remark" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></Input>
      </Form-item>
      <Form-item>
        <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
        <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
        <Button type="text" @click="handlerChange" style="margin-left: 8px">修改密码</Button>
      </Form-item>
    </Form>

    <Modal v-model="changeFlag" title="修改密码" size="small"  @on-ok="changePasswd">
      <Form :model="changeForm" label-position="left" size="small">
        <FormItem label="旧密码">
          <Input type="password" v-model="changeForm.oldPwd"/>
        </FormItem>
        <FormItem label="新密码">
          <Input type="password" v-model="changeForm.newPwd"/>
        </FormItem>
        <FormItem label="重复新密码">
          <Input type="password" v-model="changeForm.repeatPwd"/>
        </FormItem>
      </Form>
    </Modal>
  </Card>
</template>

<script>
import {
  SERVER_CPT_URL,
  V_ROOT
} from '@/api/config'
export default {
    data () {
        return {
            changeFlag: false,
            changeForm: {},
            formValidate: {
                Name: '',
                Abbr: '',
                Sex: 1,
                Expert: '教师',
                Job: '班主任',
                Photo: '../../assets/default.jpg',
                Phone: '13900000000',
                Email: '',
                remark: ''
            },
            ruleValidate: {
                Abbr: [{
                    required: true,
                    message: '姓名不能为空',
                    trigger: 'blur'
                }],
                Phone: [
                    {
                        required: true,
                        message: '请填写正确的联系电话（手机）！',
                        trigger: 'blur',
                        transform: (value) => {
                            let reg = /(^1[3|4|5|7|8]\d{9}$)|(^09\d{8}$)/
                            if (reg.test(value)) {
                                return value
                            } else {
                                return false
                            }
                        }
                    }
                ]
//        Email: [{
//          required: true,
//          message: '邮箱不能为空',
//          trigger: 'blur'
//        },
//        {
//          type: 'email',
//          message: '邮箱格式不正确',
//          trigger: 'blur'
//        }
//        ]
            }
        }
    },
    watch: {
    // console.log(this.state.userInfo)
        userInfo () {
            console.log(this.state.userInfo)
            if (this.state.userInfo) {
                this.formValidate = this.state.userInfo
            }
        }
    },
    computed: {
        userInfo () {
            return this.$store.state.app.userInfo
        },
        state () {
            return this.$store.state.app
        },
        actionUrl () {
            return SERVER_CPT_URL + '/upload/PhotoUpload?token=' + this.state.token
        },
        imgUrl () {
            if (!this.state.userInfo.Photo) {
                return '/static/img/default.jpg'
            } else {
                return V_ROOT + '/' + this.state.userInfo.Photo
            }
        }
    },
    methods: {
        handleSubmit (name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    this.$api.UpdateUserProf(this.formValidate).then(res => {
                        if (!res.error) {
                            this.$store.dispatch('getUserInfo')
                            this.$Message.success(res.message)
                            this.$store.dispatch('getUserInfo')
                        } else {
                            this.$Message.error(res.message, 4)
                        }
                    }, err => {
                        this.$Message.error(err, 4)
                    })
                } else {
                    this.$Message.error('表单验证失败!')
                }
            })
        },
        handleReset (name) {
            this.VideoCancel()
            this.$store.dispatch('getUserInfo')
            this.formValidate = this.state.userInfo
        },
        VideoCancel () {
            let row = {
                Url: this.formValidate.Photo
            }
            if (this.isUpload) {
                this.$api.PhotoCancel(row).then(res => {
                    console.log('ok')
                })
            }
      //        this.formValidate.Img='http://192.168.1.139/live/time.jpg'
            this.$refs['upload'].clearFiles()
            this.$refs['formValidate'].resetFields()
      //        if(!this.formValidate.Photo){
      //          return
      //        }
            this.isUpload = false
        },
        handleRemove (file) {
      // 从 upload 实例删除数据
            this.VideoCancel()
      //        const fileList = this.$refs.upload.fileList;
      //        this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
        },
        handleSuccess (res, file) {
      // 因为上传过程为实例，这里模拟添加 url
      //        this.$Notice.warning({
      //          title: '超出文件大小限制',
      //          desc: '文件 ' + file.name + ' 太大，不能超过 2M。'
      //        });
            console.log(res, file)
            this.isUpload = true
      //        this.imgName=res.jdata.Img
      //        this.imgName='http://192.168.1.139/live/520414a01d54b32f47eec151f5475dbf/imag/e9fe9995e0c3f3d828db0931d955d9d3.jpg'
      //        this.formValidate.Title=res.jdata.Title
      //        this.formValidate.Img=this.imgName
            this.formValidate.Photo = res.jdata
      //        file.url = 'https://o5wwk8baw.qnssl.com/7eb99afb9d5f317c912f08b5212fd69a/avatar';
      //        file.name = '7eb99afb9d5f317c912f08b5212fd69a';
        },
        handleFormatError (file) {
            this.$Notice.warning({
                title: '文件格式不正确',
                desc: '文件 ' + file.name + ' 格式不正确，请上传 jpg 或 png 格式的图片。'
            })
        },
        handleMaxSize (file) {
            this.$Notice.warning({
                title: '超出文件大小限制',
                desc: '文件 ' + file.name + ' 太大，不能超过 2M。'
            })
        },
        handleBeforeUpload () {
            const check = this.$refs.upload.fileList < 2
      //        console.log(check)
            if (!check) {
                this.$Notice.warning({
                    title: '最多只能上传 1张图片。'
                })
            }
            return check
        },
        handlerChange () {
            this.changeFlag = true
        },
        changePasswd () {
            if (this.changeForm.oldPwd && this.changeForm.newPwd && this.changeForm.repeatPwd) {
                this.$api.ChangePwd(this.changeForm).then(res => {
                    console.log(res)
                    this.$Message.success(res.message)
                    this.$store.dispatch('getUserInfo')

                    this.$store.dispatch('getUserInfo')
                }, err => {
                    if (err) {
                        this.$Message.error(err, 4)
                    }
                })
            } else {
                this.$Message.warning('请填写旧密码与新密码！')
            }
        }
    },
    mounted () {
        this.formValidate = this.state.userInfo
    }
}
</script>
